<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contact</title>
</head>
<style>
</style>

<body>
    <div id="app">
        <div class="top">
            <span>任务分配系统——成员管理</span>
            <a href="http://localhost:8080/ManageSystem/Boss/main.html">首页</a>
            <a href="http://localhost:8080/ManageSystem/Boss/center.html">个人中心</a>
            <img :src="imageUrl" onerror="this.src='../profilephoto/default.jpg'" alt="头像" style="height:30px;width:30px;border-radius: 50%">
            <span>{{user.name}}</span>
            <el-button @click="exit">退出登录</el-button>
        </div>
        <div class="sidebar">
            <ul>
                <li><a href="http://localhost:8080/ManageSystem/Boss/main.html">当前任务</a></li>
                <li><a href="http://localhost:8080/ManageSystem/Boss/taskArchive.html">归档任务</a></li>
                <li><a href="javascript:;">成员管理</a></li>
                <li><a href="http://localhost:8080/ManageSystem/Boss/assignment.html">任务分配</a></li>
                <li><a href="http://localhost:8080/ManageSystem/Boss/issueNotice.html">发布公告</a></li>
                <li><a href="http://localhost:8080/ManageSystem/Boss/notice.html">公告</a></li>
            </ul>
        </div>
        <div class="contact">
            <div class="manageCode">
                <h3>当前准入码：</h3>
                <p>您的职位：{{department.name}}</p>
                <p>当前准入码：{{department.manageCode}}</p>
                <p>剩余使用次数：{{department.time}}</p>
                <h3>重设准入码：</h3>
                <p>目标部门:
                    <el-select v-model="value" clearable placeholder="请选择部门">
                        <el-option
                                v-for="item in departments"
                                :key="item.departmentId"
                                :label="item.name"
                                :value="item.departmentId">
                        </el-option>
                    </el-select>
                </p>
                <input type="text" placeholder="准入人数" value=1 disabled>
                <el-button @click="resetManageCode">更新准入码</el-button>
            </div>
            <div class="employee">
                <h2>下属成员</h2>
                <el-table
                        :data="users"
                        style="width: 100%"
                        :default-sort = "{prop: 'date', order: 'descending'}"
                >
                    <el-table-column
                            prop="departmentName"
                            label="部门名"
                            sortable
                            width="180">
                    </el-table-column>
                    <el-table-column
                        label="头像"
                        width="70">
                        <template slot-scope="scope">
                            <img :src="scope.row.profilephotoSrc" onerror="this.src='../profilephoto/default.jpg'" alt="头像" style="height:30px;width:30px;border-radius: 50%">
                        </template>
                </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            sortable
                            width="180">
                    </el-table-column>
                    <el-table-column
                        prop="position"
                        label="职位"
                        sortable
                        width="180">
                </el-table-column>
                    <el-table-column
                            prop="email"
                            label="电子邮箱">
                    </el-table-column>
                </el-table>
            </div>
        </div>


    </div>
</body>
<script src="../js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script>


    new Vue({
        el: "#app",
        mounted() {
            this.checkSession();
        },
        methods: {
            checkSession() {
                axios({
                    method: "get",
                    url: "http://localhost:8080/ManageSystem/user/checkSession"
                }).then(resp => {
                    if (resp.data === null) {
                        alert("请进行登录再操作")
                        window.location.href = "http://localhost:8080/ManageSystem/login.html";
                    }
                    else if(resp.data.position !=='总经理'){
                        alert("权限不足，即将返回,本次操作已被后台记录,请规范您的操作")
                        window.location.href = "http://localhost:8080/ManageSystem/login.html";
                    }
                    else{
                        this.user = resp.data;
                        this.imageUrl = "../profilephoto/"+this.user.userId+".jpg";
                        this.selectAllDepartment();
                        this.selectDepartment();
                        this.selectUsers();
                    }
                })
            },
            selectAllDepartment(){
                axios({
                    method: "get",
                    url: "http://localhost:8080/ManageSystem/department/selectAllDepartment"
                }).then(resp => {
                    this.departments = resp.data
                })
            },
            selectUsers(){
                axios({
                    method: "get",
                    url: "http://localhost:8080/ManageSystem/department/selectAllUser"
                }).then(resp => {
                   this.users = resp.data;
                   for(let i =0;i<this.users.length;i++){
                       this.users[i].departmentName = this.departments[this.users[i].departmentId-2].name
                       this.users[i].profilephotoSrc = "../profilephoto/"+ this.users[i].userId+".jpg";
                   }
                })
            },
            exit(){
                axios({
                    method: "get",
                    url: "http://localhost:8080/ManageSystem/user/delectSession",
                }).then(resp=>{
                    this.checkSession()
                })
            },
            selectDepartment(){
                axios({
                    method: "get",
                    url: "http://localhost:8080/ManageSystem/department/selectDepartment",
                }).then(resp=>{
                    this.department = resp.data;
                    this.newDepartment = JSON.parse(JSON.stringify(resp.data));//深拷贝
                    this.newDepartment.time = 1;
                })
            },
            resetManageCode(){
                axios({
                    method: "post",
                    url: "http://localhost:8080/ManageSystem/department/resetManageCode?value="+this.value,
                    data:this.newDepartment
                }).then(resp=>{
                   this.selectDepartment();
                })
            },
        },
        data() {
            return{
                department:{
                    departmentId:'',
                    name:'',
                    principal:'',//负责人
                    manageCode:'',
                    time:'',
                },
                user:{
                    userId:'',
                    departmentId:'',
                    name:'',
                    password:'',
                    position:'',
                    email:'',
                },
                imageUrl: '',
                newDepartment:{
                    departmentId:'',
                    name:'',
                    principal:'',//负责人
                    manageCode:'',
                    time:1,
                },
                departments: [{
                    departmentId:'',
                    name:'',
                    principal:'',//负责人
                    manageCode:'',
                    time:'',
                }],
                value: '',
                users:[],
                tableData: [],
            }
        }

    })
</script>
</html>